<template>
	<div>
		<view style="width: 400rpx;">
			<u-tabs class="utabs" :list="list" :is-scroll="true"></u-tabs>
		</view>
		<u-form :model="form" ref="uForm">
			<u-upload :custom-btn="true">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
					<div>请选择上传封面图片</div>
				</view>
			</u-upload>
			<u-form-item label-width="100px" label="标题" prop="name">
				<u-input v-model="form.name" placeholder="不超过20个字" /></u-form-item>
			<u-form-item label-width="100px" label="活动地点" prop="location">
				<u-input v-model="form.location" @click="clickLocation" placeholder="请选择活动地点" />
			</u-form-item>
			<u-form-item label-width="100px" label="活动日期" prop="date">
				<u-input v-model="form.date" placeholder="请选择活动日期" />
				<u-picker v-model="locationshow" mode="time"></u-picker>
			</u-form-item>
			<u-form-item label-width="100px" label="活动时间" prop="time">
				<u-input v-model="form.time" placeholder="请选择活动时间" />
				<u-picker v-model="locationshow" mode="time"></u-picker></u-form-item>
			<u-form-item label-width="130px" label="取消截止报名时间" prop="deadline">
				<u-input v-model="form.deadline" placeholder="请选择截止报名时间" @click="deadlineshow = true" />
				<u-select v-model="deadlineshow" mode="single-column" :list="deadlinelist"></u-select>
			</u-form-item>
			<u-form-item label-width="100px" label="活动描述" prop="describe">
				<u-input :height="170" v-model="form.describe" placeholder="请填写活动描述" />
			</u-form-item>
			<u-form-item label-width="100px" prop="picturelist">
				<u-upload v-model="form.picturelist" :action="action" @on-remove="onRemove" max-count="6"></u-upload>
			</u-form-item>
			<u-form-item label-width="100px" label="收费类型" prop="feetype">
				<u-input v-model="form.feetype" placeholder="请选择收费类型" @click="feetypeshow = true" />
				<u-select v-model="feetypeshow" mode="single-column" :list="feetypelist" :default-value="[2]"
					@confirm="feetypeconfirm"></u-select>
			</u-form-item>
			<u-form-item label-width="100px" label="收费金额" prop="feetype" v-if="feetmoneyshow">
				<u-input v-model="form.feetmoney" placeholder="请输入收费金额" @click="feetypeshow = true" />
			</u-form-item>
			<u-form-item label-width="130px" label="女士是否享受优惠">
				<u-switch slot="right" v-model="womensdiscount"></u-switch>
			</u-form-item>
		</u-form>
		<view class="activitytype">
			<div class="title-bg">
				<div class="title">活动方式</div>
			</div>
			<view style="width: 400rpx;">
				<u-tabs :list="activitytypelist" :is-scroll="false" :current="current"
					@change="changeactivitytype"></u-tabs>
			</view>
			<view class="CGActivity" v-if="activitytype">
				<u-form-item label-width="100px" label="报名人数" prop="name">
					<u-input v-model="form.name" placeholder="不超过20个字" /></u-form-item>
				<u-form-item label-width="100px" label="报名费用" prop="location">
					<u-input v-model="form.location" @click="locationshow = true" placeholder="请选择活动地点" />
				</u-form-item>
			</view>
			<view class="CGActivity" v-else="activitytype">
				<div class="title-bg">
					<div class="title">小组1</div>
				</div>
				<u-form-item label-width="100px" label="小组名称" prop="name">
					<u-input v-model="form.name" placeholder="请输入小组名称" />
				</u-form-item>
				<u-form-item label-width="100px" label="报名人数" prop="location">
					<u-input v-model="form.location" placeholder="请选择本组的报名人数" />
				</u-form-item>
				<u-form-item label-width="100px" label="报名费用" prop="location">
					<u-input v-model="form.location" placeholder="请选择本组的报名费用" />
				</u-form-item>
				<div class="title-bg">
					<div class="title">小组2</div>
				</div>
				<u-form-item label-width="100px" label="小组名称" prop="name">
					<u-input v-model="form.name" placeholder="请输入小组名称" />
				</u-form-item>
				<u-form-item label-width="100px" label="报名人数" prop="location">
					<u-input v-model="form.location" placeholder="请选择本组的报名人数" />
				</u-form-item>
				<u-form-item label-width="100px" label="报名费用" prop="location">
					<u-input v-model="form.location" placeholder="请选择本组的报名费用" />
				</u-form-item>
				<u-button @click="addGroup"><u-icon name="plus-circle" size="28"></u-icon>新增分组</u-button>
			</view>

		</view>
		<view class="OrganizerInformation">
			<div class="title-bg">
				<div class="title">组织者信息</div>
			</div>
			<view class="">
				<u-form-item label-width="100px" label="联系人" prop="name">
					<u-input v-model="form.name" placeholder="不超过20个字" />
				</u-form-item>
				<u-form-item label-width="100px" label="报名费用" prop="location">
					<u-input v-model="form.location" @click="locationshow = true" placeholder="请选择活动地点" />
				</u-form-item>
				<u-form-item label-width="100px" label="微信号" prop="name">
					<u-input v-model="form.name" placeholder="不超过20个字" />
				</u-form-item>
			</view>
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				key: '6R7BZ-NY6C4-VJKUV-FKTZM-OZPVT-34BIR', //使用在腾讯位置服务申请的key
				referer: 'PMRC', //调用插件的app的名称
				hotCitys : '', // 用户自定义的的热门城市
				feetmoneyshow: false, //收费金额输入框展示
				feetypeshow: false, //收费类型下拉框展示
				feetypelist: [{
					value: '1',
					label: '线下收费'
				}, {
					value: '2',
					label: 'AA制'
				}, {
					value: '3',
					label: '预付'
				}],
				deadlineshow: false, //取消截止报名时间弹出层
				deadlinelist: [{
						value: '1',
						label: '1小时'
					},
					{
						value: '2',
						label: '2小时'
					},
					{
						value: '3',
						label: '3小时'
					},
					{
						value: '4',
						label: '4小时'
					},
					{
						value: '5',
						label: '5小时'
					},
					{
						value: '6',
						label: '6小时'
					},
					{
						value: '7',
						label: '7小时'
					},
					{
						value: '8',
						label: '8小时'
					},
					{
						value: '9',
						label: '9小时'
					},
					{
						value: '10',
						label: '10小时'
					}
				],
				scrollTop: 0, //返回顶部
				locationshow: false,
				action: 'http://www.example.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}],
				list: [{
					name: '填写活动'
				}],
				form: {
					name: '',
					location: '',
					date: '',
					time: '',
					deadline: '',
					describe: '',
					picturelist: '',
					feetype: '',
					womensdiscount: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名', // 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				womensdiscount: false,
				activitytypelist: [{
					name: '常规活动'
				}, {
					name: '分组活动'
				}],
				current: 0,
				activitytype: true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			changeactivitytype(index) {
				this.current = index
				this.activitytype = !this.activitytype;
			},
			//活动照片移除
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			feetypeconfirm() {
				this.feetmoneyshow = true
			},
			//点击选择位置
			clickLocation() {
				wx.navigateTo({
				  url: `plugin://citySelector/index?key=${this.key}&referer=${this.referer}&hotCitys=${this.hotCitys}`,
				})

				// wx.authorize({
				// 	scope: 'scope.userLocation',
				// 	success(e) {
				// 		console.log("1")
				// 		wx.getLocation({
				// 			type: 'gcj02',
				// 			success(location) {
				// 				console.log("2")
				// 				wx.chooseLocation({
				// 					success(res) {

				// 						console.log("3")
				// 						var address_info = res.address;
				// 						console.log(address_info)
				// 						// that.data.address.city = address_info;
				// 						// that.setDat({
				// 						// 	address:that.data.address
				// 						// })
				// 					}
				// 				})
				// 			}
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activitytype {
		.title-bg {
			width: 750rpx;
			height: 70rpx;
			background-color: #F7F7F7;

			.title {
				margin: 10rpx 0rpx 0rpx 20rpx;
				font-size: 30rpx;
				line-height: 80rpx;
				color: #CCCCCC;
			}
		}
	}

	.OrganizerInformation {
		.title-bg {
			width: 750rpx;
			height: 70rpx;
			background-color: #F7F7F7;

			.title {
				margin: 10rpx 0rpx 0rpx 20rpx;
				font-size: 30rpx;
				line-height: 80rpx;
				color: #CCCCCC;
			}
		}
	}

	.utabs {
		width: 100rpx;
	}

	/* 自定义上传图片样式 */
	.slot-btn {
		width: 750rpx;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 20rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	/* label宽度 */
	.custom-label-width .uni-forms__label {
		width: 200px;
	}

	// 返回顶部
	.wrap {
		height: 200vh;
	}
</style>